<template>
  <Model :title="title" v-model="modelValue" @onClose="closeModel" @onOk="onOk">
    <div class="user-box d-flex">
      <div class="left">
        <el-checkbox-group v-model="checkList">
          <ul>
            <li v-for="item in userList" :key="item">
              <el-checkbox :label="item.name" :value="item" />
            </li>
          </ul>
        </el-checkbox-group>
      </div>
      <div class="right">
        <ul>
          <li v-for="item in checkList" :key="item.id">
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </Model>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// import { useStore } from "@/stotes/index";
// import { storeToRefs } from 'pinia'
import { getUser, getUserInfoListApi } from '@/api/mgmtUser' //api/后面不能大写Mgmt
import Model from '@/components/Model.vue'
// 接受父组件数据
const props = defineProps({
  title: { type: String, default: '' },
  modelValue: { type: Boolean, default: false },
  selectUser: { type: Array, default: [] } //默认勾选的人
})
// 子组件通过事件向父组件传值
const emit = defineEmits(['onClose1', 'onOk1'])
const closeModel = () => {
  emit('onClose1')
}
const onOk = () => {
  console.log(checkList.value)
  emit('onOk1', checkList.value)
}
const checkList = ref([]) // 选中的人员
const userList = ref([]) //所有人员
const initData = async () => {
  const res = await getUser({ pageNo: 1, pageSize: 10 })
  if (res.code === 200) {
    userList.value = res.data.map((item) => {
      return {
        email: item.email,
        id: item.id,
        name: item.name,
        tel: item.tel,
        role: item.role
      }
    })
    // 把默认要勾选的人放到已选择人员里
    checkList.value.push(...props.selectUser)
  }
}
initData()
</script>
<style lang="scss" scoped>
.user-box {
  height: 330px;
  .left {
    width: 50%;
    overflow: auto;
    border-right: 1px solid #ddd;
    padding: 10px 20px;
    li {
      height: 32px;
      line-height: 32px;
    }
  }
  .right {
    width: 50%;
    overflow: auto;
    padding: 10px 20px;
    li {
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>
